<template>
	<view class="active_wrap">
		<view class="HMSM">
			<!-- 奖品列表 -->
			<view class="box-bg" v-for="(block, inblock) in shaftList" :key="inblock">
				<view class="box" :style="{
            transform: 'translate3d(' + translateX[inblock] + 'px,0, 0)',
            'transition-duration': duration + 'ms',
          }">
					<view v-for="(item, index) in block" :key="index" class="box_item">
						<image :src="item.image" mode="aspectFit"></image>
						<view class="border_t" v-if="item.level_id == '1'"
						style="background-image: url('https://morgan.dingxians.cn/static/uniPic/01.png');background-size: 100% 100%;">
					</view>
					<view class="border_t" v-if="item.level_id == '2'"
						style="background-image: url('https://morgan.dingxians.cn/static/uniPic/02.png');background-size: 100% 100%;">
					</view>
					<view class="border_t" v-if="item.level_id == '3'"
						style="background-image: url('https://morgan.dingxians.cn/static/uniPic/03.png');background-size: 100% 100%;">
					</view>
					<view class="border_t" v-if="item.level_id == '4'"
						style="background-image: url('https://morgan.dingxians.cn/static/uniPic/04.png');background-size: 100% 100%;">
					</view>
					</view>
				</view>
			</view>

			<view class="line">
				<image
					src="https://morgan.dingxians.cn/static/draw/03.png"
					mode="heightFix"
				/>
			</view>
		</view>
		<image class="draw-mask" src="https://morgan.dingxians.cn/static/draw/3.png" mode="scaleToFill" />
	</view>
</template>
<script>
	export default {
		props: ['devicePixelRatio'],
		data() {
			return {
				//每个盒子宽度
				boxWidth: 0,
				//右边距
				boxRight: 0,
				//线的高度
				lineHeight: 0,
				//类型三发或者五发
				type: 3, //默认三发
				// 位置
				translateX: [0, 0, 0, 0, 0],
				// 总的摇奖时间 单位毫秒
				duration: 8000,
				//奖品列表
				textList: [],
				shaftList: [],
				// 结果列表
				resultsList: [],

				// 是否开奖
				isStart: false,
				// 跳转结果页面定时器
				timer: null,
				// 开始抽奖的时间
				timers: null,

				// 每个奖品生成的长度
				prizeListLen: 50,
			}
		},
		watch: {
			boxWidth(newValue) {
				//console.log('监听每个盒子的宽度newValue', newValue)
				if (newValue > 0) {
					if (this.isStart) {
						this.start()
					}
				}
			},
		},
		beforeDestroy() {
			clearTimeout(this.timer)
		},
		methods: {
			getWidth() {
				let query = uni.createSelectorQuery().in(this)
				let dom = query.select('.box_item')
				dom
					.boundingClientRect((data) => {
						if (!data || !data.length) {
							// (690rpx - 40px) / 5
							this.boxWidth = (uni.upx2px(680) - 40) / 5
							console.log("data1: ", this.boxWidth)
						} else {
							this.boxWidth = data.width
							console.log("data2: ", this.boxWidth)
						}
					})
					.exec()
			},
			//随机数据
			init() {
				let arr = []
				for (let i = 0; i < this.type; i++) {
					let arr1 = []
					for (let j = 0; j < this.prizeListLen; j++) {
						let index = Math.trunc(Math.random() * this.textList.length)
						let text = this.textList[index]
						arr1.push(text)
					}
					arr.push(arr1)
				}
				this.shaftList = arr
				this.$nextTick(() => {
					this.getWidth()
				})
			},
			//开始抽奖
			start() {
				let that = this
				if (that.isShowResult) {
					return
				}
				this.findPro(this.resultsList)
				let url = 'https://www.dingxians.cn/app/12750.mp3'
				this.$emit('playVoice', url)
				this.timer = setTimeout(() => {
					this.$emit('start')
				}, 8500)
			},
			clearTimeout2() {
				this.isShowResult = true
				if (this.timer != null) {
					clearTimeout(this.timer)
				}
			},
			//定位结果数据
			findPro(list) {
				console.log(list, '定位结果数据')
				let num = this.prizeListLen - 3
				/* this.boxWidth = uni.getStorageSync('boxWidth_3') */
				let translateNum = (this.boxWidth + 10) * (num - 2)
				let translateArr = []
				for (let i = 0; i < this.type; i++) {
					let data = {
						image: list[i].blind_box_prize_image,
						level_id: list[i].level_id,
					}
					this.shaftList[i].splice(num, 1, data)
					translateArr[i] = translateNum * -1
				}
				this.translateX = translateArr
			},
		},
	}
</script>
<style lang="scss" scoped>
	.active_wrap {
		position: relative;
		width: 750rpx;
		height: 570rpx;

		// background-image: url('https://mh.qingfentool.vip/upload/image/20230511/9bb62c23e7f4434ac1d51481a5a139a3.png');
		// background-color:red;
		// background-repeat: no-repeat;
		// background-size: 100% 100%;
		// position: relative;
		// overflow: hidden;
		/* 	margin-bottom: 200rpx; */
		.draw-mask {
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			z-index: 2;
		}

		&::after {
			content: '';
			z-index: 2;
			position: absolute;
			left: 30rpx;
			top: 100rpx;
			width: 688rpx;
			height: 600rpx;
			background-size: 100% 100%;
		}

		.HMSM {
			z-index: 3;
			position: absolute;
			top: 80rpx;
			left: 35rpx;
			width: 680rpx;

			overflow: hidden;
			box-sizing: border-box;
			/* padding: 0 20rpx; */


			.box-bg {
				background-size: 100% 100%;
			}

			.box {
				display: flex;
				align-items: center;
				transition: all cubic-bezier(0.3, 0.1, 0, 1) 0s;
				margin-bottom: 18rpx;
				position: relative;
				box-sizing: border-box;

				/* padding: 0 40rpx; */

				/*  &::before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-size: 100% 100%;
        background-image: url('https://www.dingxians.cn/upload/images/index/bg-draw-item.png');
      } */

				&:nth-last-child(1) {
					margin-bottom: 0;
				}

				.box_item {
					display: flex;
					// align-items: center;
					justify-content: center;
					position: relative;
					width: calc((680rpx - 40px) / 5);
					height: 150rpx;
					// background: #8EC6D1;
					// border: 3rpx solid #1D82C8;
					border-radius: 10rpx;
					margin-right: 10px;
					box-sizing: border-box;
					flex-shrink: 0;
					overflow: hidden;

					image {
						width: 84%;
						height: 130rpx;
						margin: calc((116rpx - 12rpx - 90rpx - 3rpx) / 2) 0;
						border-radius: 4rpx;
						position: absolute;
						left: 0;
						right: 0;
						top: 0;
						bottom: 0;
						margin: auto;
						z-index: 999;
					}

					.border_t {
						width: 100%;
						position: absolute;
						bottom: 0;
						left: 0;
						border-radius: 5rpx;
						height: 150rpx;
						// transform: rotate(351deg) translateY(0rpx) rotateX(60deg) skewX(345deg);
						// z-index: 1;
					}
				}
			}

			.line {
				width: 19rpx;
				height: 463rpx;
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				margin: auto;
				image{
					height: 100%;
				}
			}
		}
	}
</style>